<template>
<div v-loading="loading" style="width: 100%; height: 600px">

  <div v-if="power">
    <h1>抱歉，您无权访问！</h1>
  </div>

  <!--权限-->
  <el-row v-if="isPowerShow">
    <el-card class="box-card">
      <el-row style="margin-top: 20px">
        <el-col  :offset="1">
          <div style="border: #7266ba 3px solid; height: 25px; width: 100px; color: white; background-color: #7266ba">
            <h1>店长权限</h1>
          </div>
          <div style="border-left: #7266ba 3px solid;  height: 115px; width: 100%; padding-top: 20px; text-align: left;">
            <div style="float: left; width: 400px; margin-left: 130px">
              <div style="text-align: left; margin: 0px 0 15px 20px;">员工管理：</div>
              <div style="margin: 8px 0;"></div>
              <div style="margin-left: 60px">
                <el-checkbox-group  v-model="checkedPowersEmpKeeper">
                  <el-checkbox v-for="power in powersEmpKeeper" :label="power" :key="power">{{power}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div style="float: left; width: 400px">
              <div style="text-align: left; margin: 0px 0 15px 20px;">店铺管理：</div>
              <div style="margin: 8px 0;"></div>
              <div style="margin-left: 60px; margin-bottom: 25px">
                <el-checkbox-group  v-model="checkedPowersShopKeeper">
                  <el-checkbox v-for="power in powersShopKeeper" :label="power" :key="power">{{power}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div style="clear: both; float: right; margin-right: 100px;">
              <button class="keeperButton" @click="keeperOnSubmit">确定</button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-row>

  <!--店长登录账户管理-->
  <el-row style="margin-top: 20px;" v-if="isPowerShow">
    <el-card class="box-card" style="padding-top: 20px">
      <div>
        <h1>店长登录账户管理</h1>
        <div style="float: left">
          <el-button type="primary" style="background-color: #7266ba; border: none" size="small" round @click="isAddKeeperAccountDialog = true">添加店长账户</el-button>
        </div>
        <div style="float: right; " >
          <el-input placeholder="请输入内容" v-model="inputKeeperSearch" class="input-with-select" size="small">
            <el-select v-model="selectKeeperSearch" slot="prepend" placeholder="请选择" readonly>
              <el-option label="ID" value="1"></el-option>
              <el-option label="登录名" value="2"></el-option>
              <el-option label="显示全部信息" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="searchKeeperOnSubmit"></el-button>
          </el-input>
        </div>
      </div>
      <el-table
        :data="keeperAccountInfoChange"
        height="250"
        style="width: 100%">
        <el-table-column
          prop="keeperAccountId"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="keeperAccountLoginName"
          label="登录名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="keeperAccountShop"
          label="店铺">
        </el-table-column>
        <el-table-column
          prop="keeperAccountUser"
          label="所属店长">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" circle size="small" @click="edit(scope.row,'keeper')"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="del(scope.row,'keeper')"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-row>

  <!--添加店长登录账户-->
  <el-dialog title="添加店长账户" :visible.sync="isAddKeeperAccountDialog" top="70px" v-if="isPowerShow">
  <div style="width: 500px; margin-left: 10%; margin-top: -25px; margin-bottom: -20px">
    <el-form label-width="80px" :model="keeperAccount">
      <el-form-item label="登录名">
        <el-input v-model="keeperAccount.keeperAccountLoginName" placeholder="DZ-xxx"></el-input>
      </el-form-item>
      <el-form-item label="密码设置">
        <el-input v-model="keeperAccount.keeperAccountLoginPwd" show-password ></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="okPwd" show-password></el-input>
      </el-form-item>
      <el-form-item label="店铺">
        <!--<el-input v-model="keeperAccount.keeperAccountShop" ></el-input>-->
        <el-select v-model="keeperAccount.keeperAccountShop"  placeholder="请选择店铺" style="width: 420px" @change="autoAdd('keeper')">
          <el-option
            v-for="item in shopInfo"
            :key="item.shopId"
            :label="item.chain"
            :value="item.chain">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属店长">
        <el-input v-model="keeperAccount.keeperAccountUser"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitAddKeeperAccount(keeperAccount)">添加</el-button>
        <el-button @click="onSubmitCancelKeeperAccount">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</el-dialog>

  <!--编辑店长登录账户-->
  <el-dialog title="编辑店长账户" :visible.sync="isEditKeeperAccountDialog" top="70px" v-if="isPowerShow">
    <div style="width: 500px; margin-left: 10%; margin-top: -25px; margin-bottom: -20px">
      <el-form label-width="80px" :model="keeperAccount">
        <el-form-item label="ID">
          <el-input v-model="keeperAccount.keeperAccountId" readonly></el-input>
        </el-form-item>
        <el-form-item label="登录名">
          <el-input v-model="keeperAccount.keeperAccountLoginName" readonly></el-input>
        </el-form-item>
        <el-form-item label="店铺">
          <el-input v-model="keeperAccount.keeperAccountShop"></el-input>
        </el-form-item>
        <el-form-item label="所属店长">
          <el-input v-model="keeperAccount.keeperAccountUser"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitEditAccount(keeperAccount,'keeper')">更新</el-button>
          <el-button @click="onSubmitEditCancelAccount('keeper')">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>



</div>
</template>

<script>
  import axios from "axios";

  const powerOptions = ['新增', '删除', '修改', '查询'];
  const powerShopOptions = ['修改', '查询'];
    export default {
        name: "PowerIndex",
      beforeRouteEnter(to,from,next){
          next(vm => {
            axios.post("/api/check",{passID: sessionStorage.getItem('passID')}).then((response)=> {
              if (response.data.statusCode == "200") {
                vm.isPowerShow = response.data.data.isPowerShow; // 权限页 权限
                vm.power = !vm.isPowerShow;
              }
            });
          })
      },
      mounted() {
        this.isVisited();
      },

      data() {
        return {
          // 根据权限是否显示内容
          isPowerShow : false,
          power: false,

          // 店长员工管理权限
          checkedPowersEmpKeeper: [],
          powersEmpKeeper: powerOptions,
          // 店长店铺管理权限
          checkedPowersShopKeeper: [],
          powersShopKeeper: powerShopOptions,

          // 店铺信息
          shopInfo: [],

          // 店长账户管理
          // 搜索
          inputKeeperSearch: '',
          selectKeeperSearch: '3',

          // 店长账户数据
          keeperAccountInfoChange: [],
          keeperAccountInfo: [],

          // 添加店长账户
          isAddKeeperAccountDialog: false,
          okPwd: '',
          keeperAccount: {
            keeperAccountId:'',
            keeperAccountLoginName: '',
            keeperAccountLoginPwd: '',
            keeperAccountShop: '',
            keeperAccountUser: ''
          },

          // 编辑
          isEditKeeperAccountDialog: false,

          // 加载
          loading: true

        };
      },
      methods: {
          // 获取账户是否有权限访问该页
        isVisited(){
          this.getPower("1");
          this.getKeeperAccount();
          this.getShopInfo();
        },
          // 获取店长、经理权限
        getPower(index){
          if(index == "1"){
            this.axios.get("/api/keeperpower").then((response)=>{
              if(response.data.statusCode == "200"){
                this.checkedPowersEmpKeeper = response.data.data.prEmpPowers;
                this.checkedPowersShopKeeper = response.data.data.prShopPowers;
              }
            });
          }
        },

        // 获取店铺名称、店长信息
        getShopInfo(){
          this.axios.get('/api/shopinfo').then((response)=>{
            if(response.data.statusCode == "200"){
              this.shopInfo = response.data.data;
            }
          })
        },

          // 店长权限提交
        keeperOnSubmit(){
          let add = false;
          let del = false;
          let update = false;
          let query = false;
          let shopUpdate = false;
          let shopQuery = false;
          for (let i = 0; i < this.checkedPowersEmpKeeper.length; i++) {
            if (this.checkedPowersEmpKeeper[i] == "新增"){
              add = true;
            }else if (this.checkedPowersEmpKeeper[i] == "删除"){
              del = true;
            }else if (this.checkedPowersEmpKeeper[i] == "修改"){
              update = true;
            }else if (this.checkedPowersEmpKeeper[i] == "查询"){
              query = true;
            }
          }
          for (let i = 0; i < this.checkedPowersShopKeeper.length; i++) {
            if (this.checkedPowersShopKeeper[i] == "修改"){
              shopUpdate = true;
            }else if (this.checkedPowersShopKeeper[i] == "查询"){
              shopQuery = true;
            }
          }
          this.axios({
            url: '/api/keeperpower',
            method: 'post',
            data: JSON.stringify({
              add: add,
              del: del,
              update: update,
              query: query,
              shopUpdate: shopUpdate,
              shopQuery: shopQuery
            }),
            headers:{
              'Content-Type': 'application/json; charset=utf-8'
            }
          }).then((response)=>{
            if(response.data.statusCode == "200"){
              this.$message({
                message: '店长权限更新成功！',
                center: true,
                type: 'success'
              });
            }else {
              this.$message({
                message: '店长权限更新失败！',
                center: true,
                type: 'error'
              });
            }
            this.getPower("1");
          })

        },

        // 查询工具方法 向数组中添加查询结果并返回结果
        accountSearchPush(v, attribute){
          let vote = {};
          if(attribute == 'keeper'){
            vote.keeperAccountId = v.keeperAccountId;
            vote.keeperAccountLoginName = v.keeperAccountLoginName;
            vote.keeperAccountShop = v.keeperAccountShop;
            vote.keeperAccountUser = v.keeperAccountUser;
            return vote;
          }else {
            return vote;
          }
        },
        // 查询工具方法 弹框显示是否查询成功
        accountSearchResult(info){
          if(info.length == 0){
            // 查询失败弹框
            this.$message({
              message: '查询失败！',
              center: true,
              type: 'error'
            });
            this.inputKeeperSearch = '';
            this.inputManagerSearch = '';
          }else {
            // 查询成功弹框
            this.$message({
              message: '查询成功！',
              center: true,
              type: 'success'
            });
            this.inputKeeperSearch = '';
            this.inputManagerSearch = '';
          }
        },

        // 店长账户管理查询
        searchKeeperOnSubmit(){
          if(this.selectKeeperSearch == '1'){
            let info = [];
            this.keeperAccountInfo.forEach( v =>{
              if( v.keeperAccountId == this.inputKeeperSearch){
                info.push(this.accountSearchPush(v,'keeper'));
              }
            });
            this.keeperAccountInfoChange = info;
            this.accountSearchResult(info);
          }else if(this.selectKeeperSearch == '2'){
            let info = [];
            this.keeperAccountInfo.forEach(v => {
              if( v.keeperAccountLoginName == this.inputKeeperSearch){
                info.push(this.accountSearchPush(v,'keeper'));
              }
            });
            this.keeperAccountInfoChange = info;
            this.accountSearchResult(info);
          }else if(this.selectKeeperSearch == '3'){
            let info = [];
            this.keeperAccountInfo.forEach( v=>{
              info.push(this.accountSearchPush(v,'keeper'));
            })
            this.keeperAccountInfoChange = info;
            this.accountSearchResult(info);
          }
        },

        // 清空添加的数据的工具方法
        clearAddAccount(attribute){
          this.okPwd = '';
          if(attribute == 'keeper'){
            this.keeperAccount={
              keeperAccountId:'',
              keeperAccountLoginName: '',
              keeperAccountLoginPwd: '',
              keeperAccountShop: '',
              keeperAccountUser: ''
            }
          }else if(attribute == 'manager'){
            this.managerAccount = {
              managerAccountId:'',
              managerAccountLoginName: '',
              managerAccountLoginPwd: '',
              managerAccountShop: '',
              managerAccountUser: ''
            }
          }
        },

        // 获取店长账户信息
        getKeeperAccount(){
          this.axios.get('/api/keeper').then((response)=>{
            if(response.data.statusCode == "200"){
              this.keeperAccountInfo = response.data.data;
              this.keeperAccountInfoChange = this.keeperAccountInfo;
              this.loading=false;
            }else {
              this.loading=false;
            }
          })
        },

        // 添加新的店长账户
        onSubmitAddKeeperAccount(v){
          let result = v.keeperAccountLoginName.match(/^DZ-(\w){4,}$/);
          if(v.keeperAccountLoginName.match(/^[ ]*$/) || !result){
            this.$message({
              message: '请输入正确的登录名！',
              center: true,
              type: 'error'
            });
          }else if(this.okPwd != v.keeperAccountLoginPwd){
            this.$message({
              message: '密码不一致！',
              center: true,
              type: 'error'
            });
            this.okPwd = '';
          }else if(v.keeperAccountLoginPwd == ''){
            this.$message({
              message: '请输入正确的密码！',
              center: true,
              type: 'error'
            });
            this.okPwd = '';
          }else if(v.keeperAccountShop == ''){
            this.$message({
              message: '请选择店铺！',
              center: true,
              type: 'error'
            });
          }else{
            this.isAddKeeperAccountDialog = false;
            this.axios({
              url: '/api/keeper',
              method: "post",
              data: JSON.stringify({
                keeperAccountLoginName: v.keeperAccountLoginName,
                keeperAccountLoginPwd: v.keeperAccountLoginPwd,
                keeperAccountShop: v.keeperAccountShop,
                keeperAccountUser: v.keeperAccountUser
              }),
              headers:{
                'Content-Type': 'application/json; charset=utf-8'
              }
            }).then((response)=>{
              if(response.data.statusCode == "200"){
                this.$message({
                  message: '新账户添加成功！',
                  center: true,
                  type: 'success'
                });
              }else {
                this.$message({
                  message: '新账户添加失败！',
                  center: true,
                  type: 'error'
                });
              }
              this.getKeeperAccount();
            });
            this.clearAddAccount('keeper');
          }
        },

        // 取消
        onSubmitCancelKeeperAccount(){
          this.isAddKeeperAccountDialog = false;
          this.clearAddAccount('keeper');
        },

        // 添加账户表单自动填充店长(经理)名
        autoAdd(attribute){
          if(attribute == 'keeper'){
            this.shopInfo.forEach(va => {
              if(va.chain == this.keeperAccount.keeperAccountShop){
                this.keeperAccount.keeperAccountUser = va.shopKeeper;
                return;
              }
            });
          }
        },

        // 编辑
        edit(item,attribute){
          if(attribute == 'keeper'){
            this.isEditKeeperAccountDialog = true;
            this.keeperAccount.keeperAccountId = item.keeperAccountId;
            this.keeperAccount.keeperAccountLoginName = item.keeperAccountLoginName;
            this.keeperAccount.keeperAccountShop= item.keeperAccountShop;
            this.keeperAccount.keeperAccountUser = item.keeperAccountUser;
          }
        },
        // 提交更新表单
        onSubmitEditAccount(v,attribute){
         if(attribute == 'keeper'){
           this.isEditKeeperAccountDialog = false;
           this.axios({
             url: '/api/keeper',
             method: "put",
             data: JSON.stringify({
               keeperAccountId: v.keeperAccountId,
               keeperAccountShop: v.keeperAccountShop,
               keeperAccountUser: v.keeperAccountUser
             }),
             headers:{
               'Content-Type': 'application/json; charset=utf-8'
             }
           }).then((response)=>{
             if(response.data.statusCode == "200"){
               this.$message({
                 message: '信息更新成功！',
                 center: true,
                 type: 'success'
               });
             }else {
               this.$message({
                 message: '信息更新失败！',
                 center: true,
                 type: 'error'
               });
             }
             this.getKeeperAccount();
           });
           this.clearAddAccount('keeper');
         }
        },

        // 取消更新的表单
        onSubmitEditCancelAccount(attribute){
          if(attribute == 'keeper'){
            this.isEditKeeperAccountDialog = false;
            this.clearAddAccount('keeper');
          }
        },

        // 删除
        del(item,attribute){
          if(attribute == 'keeper'){
            this.$confirm('此操作将永久注销该账户, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.axios.delete('/api/keeper',{params:{keeperAccountId:item.keeperAccountId}})
                .then((response)=>{
                  if(response.data.statusCode == "200"){
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                  }else {
                    this.$message({
                      type: 'error',
                      message: '删除失败，稍后尝试!'
                    });
                  }
                  this.getKeeperAccount();
                })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除!'
              });
            });
          }
        },

      }
    }
</script>

<style scoped>
  .keeperButton{
     background-color: white;
     border: #7266ba 2px solid;
     width: 70px;
     height: 35px;
     color: #7266ba;
     border-radius: 10px
   }
  .keeperButton:hover{
    background-color: #7266ba;
    border: #7266ba 2px solid;
    width: 70px;
    height: 35px;
    color: white;
    border-radius: 10px;
    cursor: pointer;
  }
  button{
    outline: none;
  }
  .el-select{
    width: 100px;
  }
   .el-input-group__prepend {
    background-color: #fff;
  }
</style>
